<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>人员信息</title>
		<style type="text/css">
			.ryxx{
				height: 450px;
				border: #EBEBEB 1px solid;/* 边框样式 */
			}
			.ryxx1{
				background-color: #E2E2E2;
				font-weight: bold;
				height: 50px;
				line-height: 50px;/* 行高 */
				padding-left: 10px;
			}
			.lf{
				text-align: center;/* 文字居中 */
				height: 400px;
				float: left;
				font-size: 15px;
			}
			.rt{
				text-align: center;
				height: 400px;
				padding-top: 20px;
			}
			.search {
				position: relative;/* 生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位 */
				width: 462px;
			}

			.search .searchText {
				border: 1px solid #ddd;
				width: 346px;
				line-height: 32px;
				height: 32px;
				padding: 0 5px;
				color: #333;
			}

			.search .searchButton {
				position: absolute;/* 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位 */
				right: 288px;
				background-color: #EBEBEB;
				width: 80px;
				height: 32px;
				color: #080808;
			}
			#bc{
				background-image: url(../img/btn_save2.gif);
				height: 35px;
				width: 82px;
				padding-left: 30px;
				padding-top: 5px;
			}
			#cz{
				background-image: url(../img/btn_res.png);
				height: 35px;
				width: 82px;
				padding-left: 30px;
				padding-top: 5px;
			}
		</style>
	</head>
	<body>
		<div class="ryxx">
			<div class="ryxx1">人员信息</div>
			<div class="biaodan">
				<div class="lf">
					<form action="" method="post">
						<p>姓名:<input type="text" name="lfxm" size="12" maxlength="20"></p><!-- 有限长 -->
						<p>所在城市：
							<select id="qy1" name="qy" size="1">
								<option value="bj">北京</option>
								<option value="sh">上海</option>
								<option value="tj">天津</option>
							</select></p>
						<p>
							个人简历：<textarea name="yj" cols="40" rows="5"></textarea><!-- 文本域 -->
						</p>
						<p>
							是否启用：<!-- 单选框 -->
							<input id="sfqy1" name="qy1" type="radio" value="qy1" />启用
							<input id="sfqy2" name="qy1" type="radio" value="qy2" />不启用
						</p>
						<p>爱好：<!-- 复选框 -->
							<input id="ah1" name="ah" type="checkbox" value="ah1" />打游戏
							<input id="ah2" name="ah" type="checkbox" value="ah2" />购物
							<input id="ah3" name="ah" type="checkbox" value="ah3" />看电影
						</p>
					</form>
					<div class="search">
						<form action="#"><!-- 提交数据到本页 -->
							<p>
								个人照片：<!-- onfocus 事件在对象获得焦点时发生，onblur 事件会在对象失去焦点时发生。 -->
								<input class="searchText" type="text" value="                      未选择任何文件" onfocus="if(this.value=='未选择任何文件')this.value=''" onblur="if(this.value=='')this.value='未选择任何文件'" />
								<input class="searchButton" type="button" value="选择文件" />
							</p>
						</form>
					</div>
					<div class="bccz">
						<input id="bc" name="bc" type="submit" value="保存" />
						<input id="cz" name="cz" type="reset" value="重置" />
					</div>
				</div>
				<div class="rt">
					身份证号：<input type="text" id="sfzh" name="sfz" size="18" maxlength="18">
				</div>
			</div>
		</div>
	</body>
</html>
